<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>yzzltz</title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    #yzbtn {
        position: absolute;
        right: 200px;
        top: 50px;
        z-index: 100;
    }
</style>
<button id="yzbtn" type="button" class="btn btn-primary" onclick="window.location='indexPage.do'">
    返回偏差台账
</button>

<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>验证资料台账
                </h1>
            </div>
        </div>


    </div>
    <div class="row clearfix">
        <div class="col-lg-12 column">

            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">查询条件</h3>
                </div>

                <div class="panel-body">
                    <div class="col-lg-6">
                        <label class="form-inline"/>验证类型：
                        <select id="condition" class="form-control" onchange="alterdisplay()">
                            <option value="1">储存期</option>
                            <option value="2">生产工艺</option>
                            <option value="3">设备</option>
                            <option value="4">工艺洁净气体</option>
                            <option value="5">厂房设施</option>
                            <option value="6">检验方法</option>
                            <option value="7">计算机化系统</option>
                            <option value="8">其他</option>
                            <option value="9">操作规程</option>
                            <option value="10">风险评估</option>
                            <option value="11">清洁规程</option>
                            <option value="12">空气净化系统</option>
                            <option value="13">制药用水系统</option>
                        </select>
                    </div>
                    <div class="col-lg-6">
                        <label class="form-inline"/>项目名称：
                        <input type="text" id="name1" class="form-control"/></label>
                    </div>
                    <div class="col-lg-6">
                        <label class="form-inline">项目代码：
                            <input type="text" id="numo1" class="form-control"/></label>
                    </div>
                    <div class="col-lg-6">
                        <label class="form-inline"/>责任部门/责任人：
                        <input type="text" id="zpeople1" class="form-control"/></label>
                    </div>


                    <div class="col-lg-6">
                        <label class="form-inline"/>验证效期：
                        <input type="date" id="effetime1" class="form-control"/></label>
                    </div>
                    <div class="col-lg-6">
                        <label class="form-inline"/>再验证周期：
                        <input type="text" id="cycle1" class="form-control"/></label>
                    </div>


                </div>
                <div class="panel-footer" align="center">
                    <button type="button" class="btn btn-default" onclick="query()">查询</button>
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">新增</button>
                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">查询结果</h3>
                </div>
                <div class="table-responsive-xl" style="overflow-x: auto; overflow-y: auto; width:100%; height: 400px;">

                    <table class="table table-bordered text-nowrap">
                        <thead>
                        <tr>
                            <th width="200px" id="table">
                                项目名称
                            </th>
                            <th width="280px">
                                项目编号
                            </th>
                            <th width="280px" id="abcd1">
                                评估品种
                            </th>
                            <th width="280px" id="abcd2">
                                储存期
                            </th>
                            <th width="280px" id="abcd3">
                                批量
                            </th>
                            <th width="280px" id="abcd4">
                                规格
                            </th>
                            <th width="280px" id="abcd5">
                                生产线
                            </th>
                            <th width="280px" id="abcd6">
                                设备编号
                            </th>
                            <th width="280px" id="abcd7">
                                设备/系统编号
                            </th>
                            <th width="280px" id="abcd8">
                                位置
                            </th>
                            <th width="280px" id="abcd9">
                                房间名称
                            </th>
                            <th width="280px" id="abcd10">
                                评估范围
                            </th>
                            <th width="280px" id="abcd11">
                                评估设备
                            </th>
                            <th width="600px">
                                责任部门/责任人
                            </th>
                            <th width="400px">
                                方案批准日期
                            </th>
                            <th width="600px">
                                验证证书批准日期
                            </th>

                            <th width="300px">
                                验证效期
                            </th>
                            <th width="400px">
                                再验证周期
                            </th>
                            <th width="600px">
                                方案起草人
                            </th>
                            <th width="600px">
                                验证目的
                            </th>
                            <th width="600px">
                                归档位置
                            </th>
                            <th width="600px">
                                归档日期
                            </th>
                            <th width="600px">
                                归档人
                            </th>
                            <th width="600px">
                                编号索取日期
                            </th>
                            <th width="300px">
                                编号索取人
                            </th>
                            <th width="150px">
                                备注
                            </th>

                        </tr>
                        </thead>
                        <tbody id="tableData">

                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    新增操作规程信息
                </h4>
            </div>
            <div class="modal-body">
                <div class="input-group">
							<span class="input-group-addon" style="width: 140px;">
								<div class="dropdown">
									<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
                                            data-toggle="dropdown">项目厂区<span class="caret"></span></button>
									<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
										<li role="presentation">
											<a role="menuitem" onclick="alterAclasses('雨花')" tabindex="-1"
                                               href="#">雨花</a>
										</li>
										<li role="presentation">
											<a role="menuitem" onclick="alterAclasses('七甸')" tabindex="-1"
                                               href="#">七甸</a>
										</li>
									</ul>
                                    </ul>
								</div>
							</span>
                    <input type="text" readonly="readonly" class="form-control" style="width: 430px;height: 48px"
                           placeholder="选择项目厂区" id="dclasses">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon" style="width: 140px">验证类型</span>
                    <select id="condition123" class="form-control" style="width: 430px" onchange="alterField()">
                        <option value="1">储存期</option>
                        <option value="2">生产工艺</option>
                        <option value="3">设备</option>
                        <option value="4">工艺洁净气体</option>
                        <option value="5">厂房设施</option>
                        <option value="6">检验方法</option>
                        <option value="7">计算机化系统</option>
                        <option value="8">其他</option>
                        <option value="9">操作规程</option>
                        <option value="10">风险评估</option>
                        <option value="11">清洁规程</option>
                        <option value="12">空气净化系统</option>
                        <option value="13">制药用水系统</option>
                    </select>
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon" id="bhFieldName1" style="width: 140px">评估品种</span>
                    <input type="text" class="form-control" id="bhFieldValue1" style="width: 430px" placeholder="请输入">
                </div>
                <br>

                <div class="input-group">
                    <span class="input-group-addon" id="bhFieldName2" style="width: 140px">储存期</span>
                    <input type="text" class="form-control" id="bhFieldValue2" style="width: 430px" placeholder="请输入">
                </div>
                <br>

                <div class="input-group">
                    <span class="input-group-addon" style="width: 140px">项目名称</span>
                    <input type="text" class="form-control" style="width: 430px" placeholder="输入项目名称" id="name">
                </div>
                <br>


                <div class="input-group">
                    <span class="input-group-addon" style="width: 140px">项目代码</span>
                    <input type="text" id="numo" class="form-control" style="width: 430px" placeholder="输入项目代码">
                </div>
               <!-- <br>
                <div class="input-group">
                    <span class="input-group-addon" style="width: 140px">项目编号</span>
                    <input type="text" id="num" class="form-control" style="width: 430px" placeholder="输入项目编号">
                </div>-->
                <br>
                <div class="input-group">
                    <span class="input-group-addon" style="width:140px">责任部门/责任人</span>
                    <input type="text" id="zpeople" class="form-control" style="width: 430px" placeholder="输入责任部门/责任人">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon" style="width: 140px">方案批准日期</span>
                    <input type="date" id="fdate" class="form-control" style="width: 430px" placeholder="输入方案批准日期">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon" style="width: 140px">验证证书批准日期</span>
                    <input type="date" id="ydate" style="width: 430px" class="form-control" placeholder="输入验证证书批准日期">
                </div>
                <br>

                <div class="input-group">
                    <span class="input-group-addon" style="width: 140px">验证效期</span>
                    <input type="date" id="effetime" style="width: 430px" class="form-control" placeholder="输入验证效期">
                </div>
                <br>

                <div class="input-group">
                    <span class="input-group-addon" style="width: 140px">再验证周期</span>
                    <input type="text" id="cycle" style="width: 430px" class="form-control" placeholder="输入再验证周期">
                </div>
                <br>

                <div class="input-group">
                    <span class="input-group-addon" style="width: 140px">方案起草人</span>
                    <input type="text" id="fpeople" style="width: 430px" class="form-control" placeholder="输入方案起草人">
                </div>
                <br>

                <div class="input-group">
                    <span class="input-group-addon" style="width: 140px">验证目的</span>
                    <input type="text" id="yaim" style="width: 430px" class="form-control" placeholder="输入物验证目的">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon" style="width: 140px">归档位置</span>
                    <input type="text" id="gdre" style="width:430px" class="form-control" placeholder="输入归档位置">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon" style="width: 140px">归档日期</span>
                    <input type="date" id="gdate" style="width: 430px"
                           class="form-control" placeholder="输入归档日期">
                </div>
                <br>

                <div class="input-group">
                    <span class="input-group-addon" style="width: 140px">归档人</span>
                    <input type="text" id="gpeople" style="width: 430px" class="form-control" placeholder="输入归档人">
                </div>
                <br>

                <div class="input-group">
                    <span class="input-group-addon" style="width: 140px">编号索取日期</span>
                    <input type="date" id="bdate" style="width: 430px" class="form-control" placeholder="输入编号索取日期">
                </div>
                <br>

                <div class="input-group">
                    <span class="input-group-addon" style="width: 140px">编号索取人</span>
                    <input type="text" id="bpeople" style="width: 430px" class="form-control" placeholder="输入编号索取人">
                </div>
                <br>

                <div class="input-group">
                    <span class="input-group-addon" style="width: 140px">备注</span>
                    <input type="text" id="rem" style="width: 430px" class="form-control" placeholder="输入备注">
                </div>
                <br>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" onclick="save()">
                    提交保存
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script>
    var abcd1;
    var abcd2;
    var abcd3;
    var abcd4;
    var abcd5;
    var abcd6;
    var abcd7;
    var abcd8;
    var abcd9;
    var abcd10;
    var abcd11;
    $(function () {
        abcd1 = $("#abcd1");
        abcd2 = $("#abcd2");
        abcd3 = $("#abcd3");
        abcd4 = $("#abcd4");
        abcd5 = $("#abcd5");
        abcd6 = $("#abcd6");
        abcd7 = $("#abcd7");
        abcd8 = $("#abcd8");
        abcd9 = $("#abcd9");
        abcd10 = $("#abcd10");
        abcd11 = $("#abcd11");
        abcd1.show();
        abcd2.show();
        abcd3.hide();
        abcd4.hide();
        abcd5.hide();
        abcd6.hide();
        abcd7.hide();
        abcd8.hide();
        abcd9.hide();
        abcd10.hide();
        abcd11.hide();
    })

    function alterField() {
        let con = $("#condition123").val();
        let value1 = $("#bhFieldValue1");
        let value2 = $("#bhFieldValue2");
        let name1 = $("#bhFieldName1");
        let name2 = $("#bhFieldName2");
        value1.attr("disabled", false);
        value2.attr("disabled", false);
        switch (con) {
            case '1':
                name1.text("评估品种");
                name2.text("储存期");
                break;
            case '2':
                name1.text("批量");
                name2.text("规格");
                break;
            case '3':
                name1.text("生产线");
                name2.text("设备编号");
                break;
            case '4':
                name1.text("生产线");
                name2.text("设备/系统编号");
                break;
            case '5':
                name1.text("位置");
                name2.text("房间名称");
                break;
            case '6':
                value1.attr("disabled", true);
                value2.attr("disabled", true);
                break;
            case '7':
                value1.attr("disabled", true);
                value2.attr("disabled", true);
                break;
            case '8':
                value1.attr("disabled", true);
                value2.attr("disabled", true);
                break;
            case '9':
                value1.attr("disabled", true);
                value2.attr("disabled", true);
                break;
            case '10':
                name1.text("评估范围");
                value2.attr("disabled", true);
                break;
            case '11':
                name1.text("评估品种");
                name2.text("评估设备");
                break;
            case '12':
                name1.text("生产线");
                name2.text("设备/系统编号");
                break;
            case '13':
                name1.text("生产线");
                name2.text("设备/系统编号");
                break;

        }
    }

    function alterdisplay() {
        let con = $("#condition").val();
        switch (con) {
            case '1':
                abcd1.show();
                abcd2.show();
                abcd3.hide();
                abcd4.hide();
                abcd5.hide();
                abcd6.hide();
                abcd7.hide();
                abcd8.hide();
                abcd9.hide();
                abcd10.hide();
                abcd11.hide();
                break;
            case '2':
                abcd1.hide();
                abcd2.hide();
                abcd3.show();
                abcd4.show();
                abcd5.hide();
                abcd6.hide();
                abcd7.hide();
                abcd8.hide();
                abcd9.hide();
                abcd10.hide();
                abcd11.hide();
                break;
            case '3':
                abcd1.hide();
                abcd2.hide();
                abcd3.hide();
                abcd4.hide();
                abcd5.show();
                abcd6.show();
                abcd7.hide();
                abcd8.hide();
                abcd9.hide();
                abcd10.hide();
                abcd11.hide();
                break;
            case '4':
                abcd1.hide();
                abcd2.hide();
                abcd3.hide();
                abcd4.hide();
                abcd5.show();
                abcd6.hide();
                abcd7.show();
                abcd8.hide();
                abcd9.hide();
                abcd10.hide();
                abcd11.hide();
                break;
            case '5':
                abcd1.hide();
                abcd2.hide();
                abcd3.hide();
                abcd4.hide();
                abcd5.hide();
                abcd6.hide();
                abcd7.hide();
                abcd8.show();
                abcd9.show();
                abcd10.hide();
                abcd11.hide();
                break;
            case '6':
                abcd1.hide();
                abcd2.hide();
                abcd3.hide();
                abcd4.hide();
                abcd5.hide();
                abcd6.hide();
                abcd7.hide();
                abcd8.hide();
                abcd9.hide();
                abcd10.hide();
                abcd11.hide();
                break;
            case '7':
                abcd1.hide();
                abcd2.hide();
                abcd3.hide();
                abcd4.hide();
                abcd5.hide();
                abcd6.hide();
                abcd7.hide();
                abcd8.hide();
                abcd9.hide();
                abcd10.hide();
                abcd11.hide();
                break;
            case '8':
                abcd1.hide();
                abcd2.hide();
                abcd3.hide();
                abcd4.hide();
                abcd5.hide();
                abcd6.hide();
                abcd7.hide();
                abcd8.hide();
                abcd9.hide();
                abcd10.hide();
                abcd11.hide();
                break;
            case '9':
                abcd1.hide();
                abcd2.hide();
                abcd3.hide();
                abcd4.hide();
                abcd5.hide();
                abcd6.hide();
                abcd7.hide();
                abcd8.hide();
                abcd9.hide();
                abcd10.hide();
                abcd11.hide();
                break;
            case '10':
                abcd1.hide();
                abcd2.hide();
                abcd3.hide();
                abcd4.hide();
                abcd5.hide();
                abcd6.hide();
                abcd7.hide();
                abcd8.hide();
                abcd9.hide();
                abcd10.show();
                abcd11.hide();
                break;
            case '11':
                abcd1.show();
                abcd2.hide();
                abcd3.hide();
                abcd4.hide();
                abcd5.hide();
                abcd6.hide();
                abcd7.hide();
                abcd8.hide();
                abcd9.hide();
                abcd10.hide();
                abcd11.show();
                break;
            case '12':
                abcd1.hide();
                abcd2.hide();
                abcd3.hide();
                abcd4.hide();
                abcd5.show();
                abcd6.hide();
                abcd7.show();
                abcd8.hide();
                abcd9.hide();
                abcd10.hide();
                abcd11.hide();
                break;
            case '13':
                abcd1.hide();
                abcd2.hide();
                abcd3.hide();
                abcd4.hide();
                abcd5.show();
                abcd6.hide();
                abcd7.show();
                abcd8.hide();
                abcd9.hide();
                abcd10.hide();
                abcd11.hide();
                break;

        }
    }

    function save() {
        let value1 = $("#bhFieldValue1").val();
        let value2 = $("#bhFieldValue2").val();
        let dclasses = $("#dclasses").val();
        let condition123 = $("#condition123").val();
        let name = $("#name").val();
        let numo = $("#numo").val();
        let num = $("#num").val();
        let numd = $("#numd").val();
        let zpeople = $("#zpeople").val();
        let fdate = $("#fdate").val();
        let ydate = $("#ydate").val();
        let effetime = $("#effetime").val();
        let cycle = $("#cycle").val();
        let fpeople = $("#fpeople").val();
        let yaim = $("#yaim").val();
        let gdre = $("#gdre").val();
        let gdate = $("#gdate").val();
        let gpeople = $("#gpeople").val();
        let bdate = $("#bdate").val();
        let bpeople = $("#bpeople").val();
        let rem = $("#rem").val();

        $.ajax({
            url: "index1.do",
            data: {
                name: name,//项目名称
                numo: numo,//项目编号代码
                num: num,//项目编号
                numd: numd,//厂区
                zpeople: zpeople,//责任部门/责任人
                fdate: fdate,//方案批准日期
                ydate: ydate,//验证证书批准日期
                effetime: effetime,//验证效期
                cycle: cycle,//再验证周期
                fpeople: fpeople,//方案起草人
                yaim: yaim,//验证目的
                gdre: gdre,//归档位置
                gdate: gdate,//归档日期
                gpeople: gpeople,//归档人
                bdate: bdate,//编号索取日期
                bpeople: bpeople,//编号索取人
                rem: rem,//备注
                abcd1:value1,
                abcd2:value2,
                con:condition123,
                dclasses:dclasses,  //厂区
                yclass:condition123
            },
            type: "get",
            dataType: "text",
            success: function (data) {
                alert(data)
            },
            error: function () {
                alert("网络错误 ！")
            }

        })
    }

    function query() {
        let name = $("#name1").val();
        let numo = $("#numo1").val();
        let zpeople = $("#zpeople1").val();
        let effetime = $("#effetime1").val();
        let cycle = $("#cycle1").val();
        let con = $("#condition").val();
        $.ajax({
            url: "query1.do",
            data: {
                name: name,
                numo: numo,
                zpeople: zpeople,
                effetime: effetime,
                cycle: cycle,
                con: con,
                yclass:con
            },
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data);
                let html = "";
                let i = 0;
                if (data.length === 0) {
                    alert("没有数据");
                } else {
                    for (i; i < data.length; i++) {
                        html += "<tr class=\"warning\">" +
                            "<td>" + data[i].name + "</td>\n" +
                            "<td>" + data[i].abcd1 + "</td>\n" +
                            "<td>" + data[i].abcd2 + "</td>\n" +
                            "<td>" + data[i].numd + "</td>\n" +
                            "<td>" + data[i].zpeople + "</td>\n" +
                            "<td>" + data[i].fdate + "</td>\n" +
                            "<td>" + data[i].ydate + "</td>\n" +
                            "<td>" + data[i].effetime + "</td>\n" +
                            "<td>" + data[i].cycle + "</td>\n" +
                            "<td>" + data[i].fpeople + "</td>\n" +
                            "<td>" + data[i].yaim + "</td>\n" +
                            "<td>" + data[i].gdre + "</td>\n" +
                            "<td>" + data[i].gdate + "</td>\n" +
                            "<td>" + data[i].gpeople + "</td>\n" +
                            "<td>" + data[i].bdate + "</td>\n" +
                            "<td>" + data[i].bpeople + "</td>\n" +
                            "<td>" + data[i].rem + "</td></tr>"

                    }
                }
                $("#tableData").html(html);
            },
            error: function () {
                alert("网络错误 ！")
            }
        })//是这个项目吗是的
    }

    //修改药品类别新增的时候
    function alterAclasses(oo) {
        $("#dclasses").val(oo);
    }
</script>
</body>
</html>
